<script>


import {courses} from "@/API/http";

export default {
  name: "discountPage",
  data(){
    return{


      discountList:[],
      // 课程参数
      discountcourse:{
        type:'discount',
        pageNum:1,
        pageSize:5
      }
    }
  },
  methods:{

  },
  created(){
    courses(this.discountcourse).then(res=>{
      // console.log(res.rows);
      this.discountList=res.rows;
      })
  },
}

</script>

<template>
  <div>

    <div class="CoursesBox">
      <!--    课程上面-->
      <div class="CoursesTop">
        <slot name="top">
        </slot>
        <div style="margin-left: auto;">更多<a-icon class="rightArrow" type="right" /></div>
      </div>
      <!--    课程下面-->
      <div class="CoursesBottom">
        <div class="coursesBottomBox">

            <div class="coursesBottomitem" v-for="item in discountList " :key="item.courseId">
              <router-link :to="{path:'/details',query:{id:item.courseId}}">
              <div class="CoursesImg">
                <img :src="item.coverFileUrl" alt="图片丢失">
              </div>
              <p class="coursetext">{{item.courseTitle}}</p>
              <p>共{{item.learningNum}}节课|{{item.participationsCount}}人报名</p>
              <div class="coursesText">
                <p class="freeText" v-if="item.isFree==='1'">免费</p>
                <p class="YText"  v-else-if="item.isDiscount==='1'">&yen;{{item.coursePrice}}
                  <del class="zkqText">&yen;{{item.discountPrice}}</del>
                </p>
                <p class="YText" v-else>{{item.coursePrice}}</p> <slot name="juhui"></slot>
              </div>
              </router-link>
            </div>

        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
p{
  margin: 0;
  padding: 0;
}
.CoursesBox{
  margin-top: 15px;
  padding: 15px ;
  border-radius: 15px;
  cursor: pointer;
  background: white;
}
//放图片的盒子
.coursesBottomBox{
  display: flex;
}
//课程上面
:deep(.CoursesTop){
  align-items: flex-end;
  display: flex;
  margin-bottom: 10px;
}
//课程下面
.CoursesBottom{
  border-top: 2px solid gainsboro;
}
//放文字图片的盒子
.coursesBottomitem{
  width: 33%;
  padding: 10px;
  margin: 10px;
  border-radius: 15px;
  box-shadow: 0 0 5px gainsboro;
  p{
    color: #0f141a;
  }
}
.CoursesImg{
  height: 117px;
  border-radius: 15px 15px 0 0;
  overflow: hidden;
  img{
    height: 117px;
    width: 100%;
    transition: transform 2s;
  }
  img:hover{
    transform: scale(1.2);
  }
}
//免费样式
.freeText{
  font-weight: bold;
  font-size: 18px;
  color: #42b983 !important;
}
//原价样式
.YText{
  font-weight: bold;
  font-size: 18px;
  color: red !important;
}
//折扣前
del{
  font-weight: 400;
  font-size: 14px !important;
  color: black !important;
}
//箭头
.rightArrow{
  margin-left: 5px;
  border: 1px solid black;
  border-radius: 50%;
  width: 15px;
  height: 15px;
}
:deep(.coursesText){
  display: flex;
}
//课程标题
.coursetext{
  width: 180px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
</style>